<!--
 * @Author: wjk
 * @Date: 2020-01-09 16:06:59
 * @LastEditors: wjk
 * @LastEditTime: 2020-11-25 17:15:59
 * @description: 箱起运费
 -->
<template>
  <view>
    <view v-if="freightData.total" class="sLine" @click="showPopup">
      <view class="lCont">运费</view>
      <view class="rCont">
        <view class="ferightPrice">
          {{ freightData.total_freight || '' }}
        </view>
        <image class="right_arror" src="/static/images/icon/icon_arror_right.png" />
      </view>
    </view>
    <base-popup :show="pShow" :show-close="false" @close="closePopup">
      <section class="maskContainer ferightMask">
        <view class="cartClose" @click="closePopup">
          <image src="/static/images/icon/icon_close.png" />
        </view>
        <view class="title">运费计算规则</view>
        <view class="ferightContent">
          <view class="freight-area">
            <view>选择产品 {{ allData.goods.title || '' }}</view>
            <view>产品数量 {{ freightGoods.count }}单位</view>
            <view>地区选择 {{ freightArea.province }}</view>
          </view>
          <view class="freight-rule">
            {{ freightData.rule }}
          </view>
          <view class="freight-example">
            <view>总运费: {{ freightData.total }}</view>
            <view>{{ freightData.desc }}</view>
          </view>
        </view>
        <view class="maskBottomBtn" @click="closePopup">知道了</view>
      </section>
    </base-popup>
  </view>
</template>
<script>
export default {
  name: 'CommodityBoxFreight',
  props: {
    allData: {
      type: Object,
      required: true,
      default: null // 是否显示遮罩层
    }
  },
  data() {
    return {
      pShow: false,
      freightData: {},
      freightArea: {},
      freightGoods: {}
    }
  },
  methods: {
    closePopup() {
      this.$set(this, 'pShow', false)
    },
    setAddress(address) {
      this.freightArea = address.defaultAddress
      this.getFreight()
    },
    async setGoods(obj) {
      this.freightGoods = obj
      this.getFreight()
    },
    async getFreight() {
      if (!this.freightGoods.sku_code || !this.freightArea.province) {
        return
      }
      const data = [
        {
          activity_id: this.allData.goods.activity_id,
          goods_id: this.allData.goods.box_id,
          goods_type: this.allData.goods.type * 1 === 0 ? '1' : this.allData.goods.type + '',
          sku_code: this.freightGoods.sku_code,
          pack_type: this.allData.goods.pack_type * 1 === 0 ? 2 : this.allData.goods.pack_type,
          num: this.freightGoods.count,
          from_type: this.allData.goods.from_type
        }
      ]
      if (this.allData.goods.type === 2 && this.allData.goods.from_type === 11 && this.allData.goods.pack_list && this.allData.goods.pack_list.length) {
        data[0].pack_list = this.allData.goods.pack_list.map(item => {
          return {
            sku_code: item.sku_code,
            num: item.package_goods_number,
            from_type: 11
          }
        })
      }
      const res = await this.$api.goodsApi.getBoxFright({
        deliveryArea: this.freightArea.province,
        deliveryAreaCode: '',
        shoppingList: JSON.stringify(data)
      })
      if (res.success) {
        this.freightData = res.data
      }
    },
    async showPopup() {
      this.pShow = true
    }
  }
}
</script>
<style lang="scss" scoped>
.ferightPrice{
  color: $color-price;
}
.ferightMask{
  .title{
    font-size: 32rpx;
    color: #000;
    margin-bottom: 30rpx;
  }
  .freight-area{
    line-height: 40rpx;
    border-bottom: 2rpx solid $color-border;
    padding: 20rpx 0;
  }
  .freight-rule{
    margin: 20rpx 0;
    color: $color-price;
  }
  .ferightContent{
    min-height: 100rpx;
  }
  .maskBottomBtn{
    background-color: #000;
    border-radius: 0;
  }
}
</style>
